<template>
  <el-tabs id="wzDiv">
    <el-tabs>
      <el-tab-pane label="订单数据" name="first"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableDatazz" style="width: 100%">
      <el-table-column prop="day" label="今日"> </el-table-column>
      <el-table-column prop="week" label="本周"> </el-table-column>
      <el-table-column prop="month" label="本月"> </el-table-column>
      <el-table-column prop="year" label="年度"> </el-table-column>
    </el-table>
    <el-tabs>
      <el-tab-pane label="订单筛选" name="first"></el-tab-pane>
    </el-tabs>
    <div id="searchBox">
      <div>
        <template>
          <el-select v-model="value" placeholder="选择搜索条件">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <el-input v-model="searchInput" placeholder="请输入搜索信息"></el-input>
        <el-button @click="search" type="primary">筛选</el-button>
      </div>
      <el-dialog
        title="筛选结果"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <template>
          <el-table :data="this.$store.state.wzStore.searchData" style="width: 100%">
            <el-table-column prop="id" label="订单号">
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="peopleName" label="收货人">
            </el-table-column>
            <el-table-column prop="phone" label="收货电话">
            </el-table-column>
            <el-table-column prop="isdiscount" label="是否促销">
            </el-table-column>
            <el-table-column prop="state" label="订单状态">
            </el-table-column>
          </el-table>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <el-tabs>
      <el-tab-pane label="订单罗列" name="first"></el-tab-pane>
    </el-tabs>
    <!-- ----------------------一下是订单详情表格----------------------------- -->
    <div id="tableBox">
      <el-table :data="currentData" style="width: 100%">
        <el-table-column label="订单号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人姓名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.peopleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人电话">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否促销">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isdiscount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- ----------------------------分页框------------------------------ -->
      <div class="block">
        <el-pagination
          @current-change="changePage"
          :page-size="5"
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="dataNum"
        >
        </el-pagination>
      </div>
      <!-- --------------------------------编辑弹出框------------------------- -->
      <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="订单号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名" :label-width="formLabelWidth">
            <el-input v-model="form.peopleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否促销" :label-width="formLabelWidth">
            <el-select v-model="form.isdiscount" placeholder="请选择">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态" :label-width="formLabelWidth">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="待付款" value="待付款"></el-option>
              <el-option label="已付款" value="已付款"></el-option>
              <el-option label="待发货" value="待发货"></el-option>
              <el-option label="已发货" value="已发货"></el-option>
              <el-option label="待收货" value="待收货"></el-option>
              <el-option label="已收货" value="已收货"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="editOver">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-tabs>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "wzMore",
  computed: {
    currentData() {
      let begin = (this.currentPage - 1) * 5;
      let end = begin + 5;
      return this.$store.state.wzStore.tableData.slice(begin, end);
    },
    dataNum() {
      return this.$store.state.wzStore.tableData.length;
    },
    searchData() {
      return this.$store.state.wzStore.searchData;
    }
  },
  data() {
    return {
      currentPage: 1,
      deleteID: {},
      tableDatazz: [
        {
          day: "今日退货订单数：5 个",
          week: "本周退货订单数：25 个",
          month: "本月退货订单数：55 个",
          year: "年度退货订单数：225 个"
        },
        {
          day: "今日有效订单数：9 个",
          week: "本周有效订单数：225 个",
          month: "本月订单总数：725 个",
          year: "年度有效订单数：5725 个"
        },
        {
          day: "今日订单总数：250.00 元",
          week: "本周订单总数：10,250.00 元",
          month: "本月订单总数：50,250.00 元",
          year: "年度订单总数：1050,250.00 元"
        }
      ],
      options: [
        {
          value: "id",
          label: "订单号"
        },
        {
          value: "peopleName",
          label: "收货人姓名"
        }
      ],
      value: "",
      searchInput: "",
      // -------------编辑弹出框-------------
      dialogFormVisible: false,
      form: {
        id: 1,
        name: "zz",
        peopleName: "zz",
        phone: "zz",
        isdiscount: "是",
        state: "已收货"
      },
      formLabelWidth: "120px",
      //---------------筛选弹出框----------------------
      centerDialogVisible: false
    };
  },
  created() {
    this.wzGetData();
  },
  methods: {
    ...mapActions(["wzGetData"]),
    changePage(val) {
      this.currentPage = val;
      // console.log(this.currentPage);
    },
    handleEdit(index, row) {
      // console.log(row);
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.peopleName = row.peopleName;
      this.form.phone = row.phone;
      this.form.isdiscount = row.isdiscount;
      this.form.state = row.state;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      this.deleteID.id = row.id;
      this.openDelete();
    },
    // ------------------删除弹框------------------------
    openDelete() {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("wzDelChangeData", this.deleteID);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // ----------------------编辑框btn-----------------------------
    editOver() {
      this.dialogFormVisible = false;
      let obj = {};
      obj.id = this.form.id;
      obj.name = this.form.name;
      obj.peopleName = this.form.peopleName;
      obj.phone = this.form.phone;
      obj.isdiscount = this.form.isdiscount;
      obj.state = this.form.state;
      console.log(obj);
      this.$store.dispatch("wzDelChangeData", obj);
    },
    search() {
      if (this.value && this.searchInput) {
        let obj = {};
        obj.value = this.searchInput;
        obj.type = this.value;
        // console.log(obj);
        this.$store.dispatch("wzSearch", obj);
        this.centerDialogVisible = true;
      }
    }
  }
};
</script>

<style scoped lang="less">
#wzDiv {
  margin-top: -15px;
  .el-tabs {
    background-color: rgb(176, 224, 230);
  }
  .el-table {
    margin: auto;
  }
  #searchBox {
    height: 60px;
    text-align: center;
    .el-input {
      width: 180px;
      margin: 10px 30px 0 50px;
    }
    .el-dialog__body {
      div {
        margin: 10px;
      }
    }
  }
  #tableBox {
    padding-bottom: 40px;
    position: relative;
    .block {
      position: absolute;
      bottom: 0px;
      right: 40%;
    }
  }
}
</style>
